 <template>
	<!-- 添加课程 -->
	<view class="content">
		<view class="title">课程名称</view>
		<view class="input">
			<input type="text" placeholder="请输入课程名称" v-model="courseName" placeholder-style="font-size: 32upx; color:#CCCCCC;" />
		</view>
		<view class="title">课程内容</view>
		<view class="select">
			<view class="select_item">
				<view class="select_item_left">周数</view>
				<view class="select_item_right font_color">{{course_queary.weekNums}}</view>
			</view>

			<view class="select_item">
				<view class="select_item_left">节数</view>
				<view class="select_item_right font_color">
					{{course_queary.weekName + ' '}}{{course_queary.timeName}}
				</view>
			</view>

			<view class="select_item">
				<view class="select_item_left">类型</view>
				<picker class="select_item_right" @change="selectType" :range="studyType">
					<view class="picker">
						<view :class="{font_color:typeName !== '请选择' }">{{typeName}}</view>
						<i class='iconfont icon-fanhui'></i>
					</view>
				</picker>
			</view>
			<view  class="select_item">
				<view class="select_item_left">备注</view>
				<view class="select_item_right">
					<input type="text" v-model="courseRemark" placeholder="请填写备注" placeholder-style="font-size: 32upx; color:#CCCCCC;" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return { 
				course_queary: {}, // 请求所需参数
				courseName: '', // 课程名称
				courseRemark: '', // 备注
				studyType: ['学习', '其它'],
				typeName: '请选择', // 类型名称 
				type_index: '', // 学习类型
				stuid: uni.getStorageSync('currentChild').student_id
			}
		},
		// 完成创建
		onNavigationBarButtonTap() {
			if (!this.stuid) return this.showToast('保存出错,请稍后再试~')
			if (this.courseName.trim().length <= 0) return this.showToast('请输入课程名称')
			if (this.type_index === '') return this.showToast('请选择类型')
			if (this.courseName.trim().length > 6) return this.showToast('名称不能超过六位哦~')
			let obj = {
				courseName: this.courseName,
				userId: uni.getStorageSync('currentChild').student_id,
				activityType: this.type_index,
				weekId: this.course_queary.weekId,
				yearKey: this.course_queary.yearKey,
				courseDay: this.course_queary.courseDay,
				timeId: this.course_queary.timeId,
				courseRemark: this.courseRemark,
				reqMethod: 2
			}
			// 开始创建课程
			this.$capi.apiPost('/stuCourse/insertStuCourse', obj).then(res => {
				if (res.data.code == 200) {
					this.showToast('创建成功', '1')
					setTimeout(() => {
						uni.navigateBack()
					},1000)
				} else {
					this.showToast(res.data.msg)
				}
			}).catch(err => {
				this.showToast('服务器出错~请稍后再试')
			})
		},
		onLoad() {
			this.course_queary = uni.getStorageSync('course_queary')
		},
		methods: {
			// 选择类型
			selectType(e) {
				this.type_index = e.target.value
				this.typeName = this.studyType[this.type_index]
			},
			
			// 吐司封装
			showToast(title, icon = 'none') {
				uni.showToast({
					title,
					icon
				})
			}
		}

	}
</script>

<style>
	.content {
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(250, 250, 250, 1);
	}

	.title {
		width: 96%;
		height: 90upx;
		line-height: 90upx;
		margin-left: 4%;
		font-size: 32upx;
		color: rgba(102, 102, 102, 1);
	}

	.input {
		width: 100%;
		height: 80upx;
		background: #FFFFFF;
		font-size: 32upx;
		color: #666666;
	}

	.input input {
		width: 96%;
		margin-left: 4%;
		height: 100%;
	}

	.select {
		width: 100%;
		background: rgba(255, 255, 255, 1);
	}

	.select_item {
		width: 92%;
		height: 92upx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid rgba(229, 229, 229, 1);
	}

	.select_item_left {
		width: 50%;
		font-size: 32upx;
		color: rgba(51, 51, 51, 1);
	}

	.select_item_right {
		width: 50%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font: 32upx;
		color: rgba(204, 204, 204, 1);
	}
	.select_item_right i {
		font-size: 18upx;
		margin-left: 10upx;
		color: #C2C2C2;
	}
	.select_item_right input{
		direction: rtl;
	}
	.select_item:last-child {
		border-bottom: none;
	}
	.picker {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.font_color {
		color: #333333;
		
	}
	
</style>
